Skip to content

feat(studio): optimize mobile user experience with responsive TopBar and navigation#1211

Merged
hotlong merged 1 commit intomainfrom
claude/optimize-mobile-user-experience
Apr 22, 2026
Merged

feat(studio): optimize mobile user experience with responsive TopBar and navigation#1211
hotlong merged 1 commit intomainfrom
claude/optimize-mobile-user-experience

Conversation

@Claude
Copy link
Copy Markdown
Contributor

@Claude Claude AI commented Apr 22, 2026

Implements Priority 1 & 2 mobile UX optimizations from the comprehensive mobile user experience evaluation: responsive TopBar layout and improved mobile navigation patterns.

Changes

TopBar Mobile Optimization (apps/studio/src/components/top-bar.tsx)

  • Added mobile hamburger menu (44px SidebarTrigger) for small screens
  • Responsive element visibility:
    • Mobile (< 640px): hamburger + brand + current page breadcrumb only
    • Desktop (≥ 640px): full navigation with org/project switchers and complete breadcrumbs
  • Hidden non-essential UI on mobile: theme toggle, mode badge, API badge, search bar
  • Responsive spacing: px-2 sm:px-4, gap-1 sm:gap-1.5

Mobile Navigation

  • SidebarTrigger visible only on mobile (sm:hidden)
  • Existing Sheet-based sidebar drawer works seamlessly on mobile via useIsMobile() hook
  • Proper touch target sizing (44px minimum) for accessibility

Foundation for Future Enhancements (apps/studio/src/components/ObjectDataTable.tsx)

  • Imported useIsMobile hook to enable responsive data table card view implementation

Before/After

Mobile (< 640px)

  • Before: Crowded TopBar with horizontal overflow, full breadcrumbs, all badges visible
  • After: Clean UI with hamburger menu, single breadcrumb, essential elements only

Desktop (≥ 640px)

  • No changes to existing desktop experience
  • All features and navigation elements remain visible

- TopBar: responsive layout with mobile hamburger menu, hide non-essential elements on small screens
- TopBar: show only current page breadcrumb on mobile, full navigation on desktop
- TopBar: improved spacing and touch targets (px-2 on mobile, px-4 on desktop)
- TopBar: hide theme toggle, mode badge, and API badge on mobile for cleaner UI
- ObjectDataTable: add useIsMobile hook import for future card view implementation
- Improved mobile navigation with SidebarTrigger button (44px touch target)

Addresses Priority 1 & 2 from mobile UX optimization plan

Agent-Logs-Url: https://github.com/objectstack-ai/framework/sessions/1135b7b4-5568-46a1-9ec4-dd63d3f120fb

Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>
@vercel
Copy link
Copy Markdown

vercel Bot commented Apr 22, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
objectstack-demo Ready Ready Preview, Comment Apr 22, 2026 6:49am
spec Ready Ready Preview, Comment Apr 22, 2026 6:49am

Request Review

import { useState, useEffect } from 'react';
import { useParams } from '@tanstack/react-router';
import { useScopedClient } from '@/hooks/useObjectStackClient';
import { useIsMobile } from '@/hooks/use-mobile';
@hotlong hotlong marked this pull request as ready for review April 22, 2026 06:51
@hotlong hotlong merged commit 8cf9ea0 into main Apr 22, 2026
13 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants